import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
// import store from '../store'
import { decreaseCountAction, increaseCountAction } from '../store/count'

export class about extends PureComponent {

  calcCount(value) {
    // 使用的mapDispatchToProps中映射的方法
    this.props.calcCount(value)
  }


  render() {
    const { count, banners, userInfo } = this.props
    return (
      <div>
        about count: {count}
        <div>
          <button onClick={() => this.calcCount(10)}>+10</button>
          <button onClick={() => this.calcCount(-100)}>-100</button>
          <button onClick={() => this.calcCount(300)}>+300</button>
        </div>
        <div>
          轮播图：
          <div>
            <ul>
              {
                banners.map((item,index) => {
                  return <li key={index}>{item}</li>
                })
              }
            </ul>
          </div>
        </div>
        <div>
          用户信息：
          <div>姓名：{ userInfo.name }</div>
          <div>年龄：{ <userInfo className="age"></userInfo> }</div>
        </div>
      </div>
    )
  }
}


const mapStateToProps = (state) => ({ 
  count: state.count.count,
  banners: state.banners.banners,
  userInfo: state.user.userInfo
})

const mapDispatchToProps = (dispatch) => ({
  calcCount(value) {
    if(value > 0) {
      dispatch(increaseCountAction(value))
    } else {
      dispatch(decreaseCountAction(Math.abs(value)))
    }
  }
})

// connect是一个方法，connect()的返回值是一个高阶组件
// 第一个参数接收state,第二个参数接收dispatch
export default connect(mapStateToProps,mapDispatchToProps)(about)